import React, { useState } from 'react';
import styles from './banji.less';
import '../../../../src/global.css'
import { Table, Button,Form, Input, Select, Popconfirm ,Modal} from 'antd';
import { useEffect } from 'react';
import { useDispatch,useSelector } from 'react-redux';
import { ClassModelState } from '@/models/class.module'
import { classList } from '@/interface/class'


let Banji:React.FC =function() {

  
  
  let dispatch = useDispatch()
 
  useEffect(() => {
    dispatch({
      type: 'classManage/classManage'
    })
    dispatch({
      type: 'classManage/roomManage'
    })
    dispatch({
      type: 'classManage/getCourseList'
    })
  }, [])
  //获取班级列表数据
  const {classList,roomList,courseList} = useSelector((model:{classManage:ClassModelState})=>model.classManage)

  
  const { Option } = Select;

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  const [form] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  const columns = [
    {
      title: '班级名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '课程名',
      dataIndex: 'course',
      key: 'course',
    },
    {
      title: '教室号',
      dataIndex: 'room',
      key: 'room',
    },
    {
      title: '操作',
      key: 'action',
      render: (text:classList) => (
        <div>
          <a onClick={()=>editData(text)}>修改</a>|
        <Popconfirm placement="top" title='确定删除吗' onConfirm={()=>deleteClass(text.key)} okText="确定" cancelText="取消">
          <a>删除</a>
        </Popconfirm>
        </div>
      ),
    },
  ];
  //删除班级
  const deleteClass=(id:string)=>{
    dispatch({
      type: 'classManage/deleteClass',
      payload: {
        grade_id: id
      }
    })
  }

  //是否显示修改的弹框
  let [isEdit,setEdit] = useState<boolean>(false)
  //回显班级名
  let [className,setClassName] = useState('')
  let [gradeId,setGradeId] = useState('')
  
  //修改班级,显示修改弹框
  const editData=(text:any)=>{
    setEdit(true)
    // setIsModalVisible(true)
    setClassName(text.name)
    setGradeId(text.key)
    console.log(text)
    text.room="";
    text.course=""
  }
  //修改取消
  const editCancel=()=>{
    setEdit(false)
    // setIsModalVisible(false)
  }

  //修改提交
  const onEdit = (values:any)=>{
    console.log(values)
    dispatch({
      type: 'classManage/editClassList',
      payload: {
        grade_id: gradeId,
        grade_name: className,
        subject_id: values.course,
        room_id: values.room
      }
    })
    setEdit(false)
  }
  


  //生成data数据
  let data:classList[] = [];
  classList.map(item=>{
    data.push({
      key: item.grade_id,
      name: item.grade_name,
      course: item.subject_text,
      room: item.room_text,
      roomId: item.room_id,
      subjectId: item.subject_id
    })
  })

    //添加弹框的开关
    let [isFlag,setFlag] = useState<boolean>(false)
    //打开添加弹框
    const showBlock=()=>{
      setFlag(true)
      // setIsModalVisible(true)
    }
    //取消添加弹框
    const cancel = () =>{
      setFlag(false)
      // setIsModalVisible(false)
    }

  //添加提交
  const onFinish = (values: any) => {
    console.log(values);
    dispatch({
      type: 'classManage/addClassList',
      payload: {
        grade_name: values.name,
        room_id: values.room,
        subject_id: values.course
      }
    })
    setFlag(false)
    form.resetFields();
  };
  


  return (
  <div className={styles.classContainer}>
    <h2>班级管理</h2>
      <div className={styles.classBox}>
        <Button type="primary" onClick={showBlock}><b>+</b> 添加班级</Button>
        <Table columns={columns} dataSource={data} />
      </div>
      {/* 添加班级 */}
    
     
      <div className={styles.wrapper}>
        {isFlag ?
          <div className={styles.addBox}>
            <div className={styles.addTitle}>
              <b>添加班级</b><span onClick={cancel}>X</span>
            </div>
            <div className={styles.addCon}>
              <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item name="name" label="班级名" rules={[{ required: true }]}>
                  <Input placeholder="班级名"/>
                </Form.Item>
                <Form.Item name="room" label="教室号" rules={[{ required: true }]}>
                  <Select
                    placeholder="请选择教室号"
                    allowClear
                  >
                    {roomList.map(item=>{
                        return  <Option value={item.room_id} key={item.room_text}>
                          {item.room_text}
                        </Option>
                      })}
                  </Select>
                </Form.Item>
                <Form.Item name="course" label="课程名" rules={[{ required: true }]}>
                  <Select
                    placeholder="课程名"
                    allowClear
                  >
                    {courseList.map(item=>{
                        return  <Option value={item.subject_id} key={item.subject_text}>
                          {item.subject_text}
                        </Option>
                      })}
                  </Select>
                </Form.Item>

                <Form.Item {...tailLayout}>
                  <Button htmlType="button" onClick={cancel}>
                    取消
                  </Button>
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>:<></>}
      </div>
     


      {/* 修改班级 */}
      <div className={styles.wrapper}>
        {isEdit ?
          <div className={styles.addBox}>
            <div className={styles.addTitle}>
              <b>修改班级</b><span onClick={editCancel}>X</span>
            </div>
            <div className={styles.addCon}>
              <Form {...layout} form={form} name="control-hooks" onFinish={onEdit}>
                <Form.Item name="name" label="班级名">
                  <Input value={className} placeholder={className} disabled/>
                </Form.Item>
                <Form.Item name="room" label="教室号" rules={[{ required: true }]}>
                  <Select
                    placeholder="请选择教室号"
                    allowClear
                  >
                    {roomList.map(item=>{
                        return  <Option value={item.room_id} key={item.room_text}>
                          {item.room_text}
                        </Option>
                      })}
                  </Select>
                </Form.Item>
                <Form.Item name="course" label="课程名" rules={[{ required: true }]}>
                  <Select
                    placeholder="课程名"
                    allowClear
                  >
                    {courseList.map(item=>{
                        return  <Option value={item.subject_id} key={item.subject_text}>
                          {item.subject_text}
                        </Option>
                      })}
                  </Select>
                </Form.Item>

                <Form.Item {...tailLayout}>
                  <Button htmlType="button" onClick={editCancel}>
                    取消
                  </Button>
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>:<></>
        }
      </div>
  </div>
    
    
  );
}

export default Banji